<template>
	<s-layout title="个人资料" navbar="normal" >
		<view class="content">
			<view class="cardBox">
				<view class="cardBox-item" hover-class="ss-hover-btn"  @tap="clickAvatar">
					<view class="cardBox-item-title">头像</view>
					<view class="cardBox-item-right">
						<image class="cardBox-item-img" :src="sheep.$url.cdn(userInfo.avatar)"  mode="aspectFit" />
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap='onChangeUsername'>
					<view class="cardBox-item-title">昵称</view>
					<view class="cardBox-item-right">
						<view class="cardBox-item-text">{{userInfo.nickname}}</view>
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
				<view class="cardBox-item" hover-class="ss-hover-btn" @tap="state.genderShow = true">
					<view class="cardBox-item-title">性别</view>
					<view class="cardBox-item-right">
						<view class="cardBox-item-text">{{gender}}</view>
						<image class="cardBox-item-icon" src="@/icon/hs_right.png" />
					</view>
				</view>
			</view>
			<!-- 修改性别 -->
			<su-popup :show="state.genderShow"  round="25" @close="cloneGender">
				<view class="popupBox" @tap="onGenderSubmit">
					<view class="popupBox-item" @tap="state.data.gender = '1'">男</view>
					<view class="popupBox-item" @tap="state.data.gender = '2'">女</view>
				</view>
				<view class="popupBox-button" @tap="cloneGender">
					取消
				</view>
			</su-popup>
			<!-- 修改头像选择 -->
			<su-popup :show="state.avatarShow"  round="25" @close="cloneAvatar">
				<view class="popupBox" @tap="onAvatarSubmit">
					<view class="popupBox-item" @tap="state.mode = 'camera'">拍照</view>
					<view class="popupBox-item" @tap="state.mode = 'album'">从手机相册选择</view>
				</view>
				<view class="popupBox-button" @tap="cloneAvatar">
					取消
				</view>
			</su-popup>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed ,onBeforeMount } from 'vue'
	import { onLoad, onShow, onHide ,onPullDownRefresh} from '@dcloudio/uni-app';
	import { showAuthModal } from '@/sheep/hooks/useModal';
	import { showAuditModal } from "@/sheep/hooks/useAudit.js"
	import { chooseFile } from '@/sheep/utils/index'
	import { clone } from 'lodash';
	
	const genderRadioMap = [
	  { name: '男', value: '1', },
	  { name: '女', value: '2', },
	  { name: '未知', value: '0', },
	];
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const gender = computed(()=>genderRadioMap.find(g=>g.value == userInfo.value.gender)?.name)
	const state = reactive({
		avatarShow:false,
		genderShow:false,
		mode:'',
		data: {},
		rules: {},
	});
	onLoad((opt)=>{
	})
	onBeforeMount(()=>{
		getUserInfo()
	})
	function onClick(){
		sheep.$router.go('/pages/index/index')
	}
	const getUserInfo = async () => {
	  const data = await sheep.$store('user').getInfo();
	  state.data = clone(data);
	  console.log('state.data: 用户信息 ', state.data);
	};
	// 保存信息
	async function onGenderSubmit() {
	  cloneGender()
	  const { error, data } = await sheep.$api.user.update({
	    gender: state.data.gender,
	  });
	  if (error === 0) {
	    getUserInfo();
	  }
	}
	function cloneGender(){
		state.genderShow = false
	}
	function clickAvatar(){
		uni.showModal({
		  title: '提示',
		  content: '是否允许打开您的相册和照相机功能，用于上传头像？',
		  cancelText: '取消',
		  confirmText: '确定',
		  success: (res) => {
			if (res.confirm) {
				state.avatarShow = true
				}else if (res.cancel) {
					console.log('用户点击取消');
			}
		  }
		})
	}
	// 保存头像修改信息
	async function onAvatarSubmit(){
		cloneAvatar()
		// #ifdef APP
		showAuditModal(
	    'WRITE_EXTERNAL_STORAGE,CAMERA',
	    async () => {
		// #endif
		try{
			let res = await chooseFile('image',1,state.mode) // camera, album
			if(res){
				const response = await sheep.$api.app.upload(res[0].url);
				if(response){
					const { error, data } = await sheep.$api.user.update({
					  avatar: response.path,
					});
					if (error === 0) {
					  getUserInfo();
					}
				}
			}
		}catch(e){
			console.log('chooseFile',e)
		}
		// #ifdef APP
		},
		  null,
		  false,
		);
		// #endif
	}
	function cloneAvatar(){
		state.avatarShow = false
	}
	// 修改用户名
	const onChangeUsername = () => {
		showAuthModal('changeNickname')
		// if(!state.data.verification?.username){
		// 	showAuthModal('changeNickname');
		// }else{
		// 	uni.showToast({
		// 		icon:'none',
		// 		title:'修改次数已使用完'
		// 	})
		// }
	};
</script>

<style lang="scss" scoped>
	.content{
		.titleLine{
			margin: 30rpx 34rpx;
			font-family: Source Han Sans;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 1;
			color: #565656;
		}
		.cardBox{
			width: 690rpx;
			margin: 30rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			.cardBox-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 40rpx 0 20rpx;
				height: 85rpx;
				border-bottom: 2rpx solid #F5F5F5;
				&:last-child{
					border-bottom: none;
				}
				.cardBox-item-title{
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #1F1F1F;
				}
				.cardBox-item-right{
					display: flex;
					align-items: center;
					.cardBox-item-text{
						font-family: Source Han Sans;
						font-size: 30rpx;
						font-weight: 500;
						line-height: normal;
						text-align: right;
						letter-spacing: normal;
						color: #484848;
					}
					.cardBox-item-tips{
						font-family: Source Han Sans;
						font-size: 28rpx;
						font-weight: normal;
						line-height: normal;
						letter-spacing: normal;
						color: #9E9E9E;
					}
					.cardBox-item-img{
						width: 67rpx;
						height: 67rpx;
						border-radius: 50%;
					}
					.cardBox-item-icon{
						width: 9rpx;
						height: 25rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		.popupBox{
			padding-top: 20rpx;
			.popupBox-item{
				height: 100rpx;
				font-family: Source Han Sans;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 100rpx;
				text-align: center;
				letter-spacing: normal;
				color: #313131;
				border-bottom: 2rpx solid #F5F5F5;
				&:last-child{
					border-bottom: none;
				}
			}
		}
		.popupBox-button{
			height: 100rpx;
			font-family: Source Han Sans;
			border-top: 10rpx solid #d8d8d8;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 100rpx;
			text-align: center;
			letter-spacing: normal;
			color: #313131;
		}
	}
</style>